<script>
import * as echarts from "echarts"
export default {
  name: "EchartsLine",
  mounted() {
    //初识化一个实例
    let myEcharts=echarts.init(this.$refs.myChart)
    //设置参数
    myEcharts.setOption({
      title:{
        //设置标题的样式
        textStyle:{
          color:'red',
          width:1200
        },
        //设置标题的居中方式（水平）
        x:'center',
        text:'helloWord',
        subtext:'副标题'
      },
      xAxis:{
        data:['ez','vn','noc','mf']
      },
      yAxis:{

      },
      series:{
        //设置系列，设置当前映射出的图形
        name:'柱状图',
        type:'line',
        data:[6300,4800,3200,600]
      },
      grid: {
        top:'5%',
        left: '5%', // 图表内容距离容器左侧的距离
        right: '5%', // 图表内容距离容器右侧的距离
        bottom: '20%', // 图表内容距离容器底部的距离，可以适当增加这个值来留出更多空间给标题
        containLabel: true, // 网格是否包含坐标轴的标签在内
      },
      tooltip:{
        //触发类型
        trigger:'axis',
        //设置坐标轴的指示器
        axisPointer:{
          type: 'cross'
        },
      },
    })
  }
}
</script>

<template>
  <!--echarts的容器 默认宽高为0，如果不进行设置的话，页面是不显示的-->
  <div ref="myChart" class="LineDiv"></div>
</template>

<style scoped>
.LineDiv{
  width: 100%;
  height: 100%;
  margin-left: 0;
}
</style>